<script setup lang="ts">
import { ref } from 'vue'
import * as accountApi from '@/api/account'
import * as systemSettingApi from '@/api/systemSetting'
import * as cardSystemApi from '@/api/cardSystem'
import { message } from 'ant-design-vue'
import { copyToCliboard } from '@/hooks/util.ts'
import MsgTable from './components/MsgTable.vue'
import Emoji from './components/Emoji.vue'
import OutCinemaLine from './components/OutCinemaLine.vue'
import dayjs, { type Dayjs } from 'dayjs'
import { useRoute } from 'vue-router'
const route = useRoute()
// 出票方式
let quotationMode = ref<number>(1)
const OutCinemaLineRef = ref()
const msgTableRef = ref()
const emojiRef = ref()

onMounted(() => {
  getFishRobotList()
  getGroupList()
})
const deliveryState = ref(1)
// 拉取机器人列表
let okRobat = ref<string>()
import type { SelectProps } from 'ant-design-vue'
const robatList = ref<SelectProps['options']>([])
interface OptionList {
  label: string
  value: string
}
let optionList = ref<Array<OptionList>>([])
const getFishRobotList = async () => {
  try {
    let {
      state,
      data,
      message: msg,
    } = await accountApi.getFishRobotList({
      currentPage: 1,
      pageSize: 100,
    })
    if (state === 200) {
      robatList.value = data.list
      optionList.value = data.list.map((item: any) => {
        return {
          label: item.nickName,
          value: item.id,
        }
      })

      options.value = data.list
      if (data.list.length == 0) {
        message.error('闲鱼：无平台账号，请先添加平台账号')
      } else if (data.list.length > 0) {
        selectRobat(data.list[0].id)
      }
    } else {
      message.error(msg)
    }
  } catch (error) {
    message.error('网络请求连接失败~')
  }
}
const selectRobat = (selectValue: any) => {
  okRobat.value = selectValue as string
  getIdleFishConfig(okRobat.value)
}
const getIdleFishConfig = async (robotId: string) => {
  try {
    let {
      state,
      data,
      message: msg,
    } = await cardSystemApi.GetConfig({
      robotId,
    })
    if (state === 200) {
      console.log('data=', data)
      if (data) {
        deliveryState.value = data.deliveryState
      }
    } else {
      message.error(msg)
    }
  } catch (error) {
    message.error('网络请求连接失败~')
  }
}

// 推送配置
let sendRobat = ref<Array<string>>([])
const selectSendRobat = (selectValue: any) => {
  sendRobat.value = selectValue
  // console.log('sendRobat.value=', sendRobat.value)
}
const options = ref<SelectProps['options']>([])
const groupList = ref<SelectProps['options']>([])
const groupId = ref<string>()
const getGroupList = async () => {
  try {
    let { state, data, message: msg } = await accountApi.getFishRobotGroupList()
    if (state === 200) {
      groupList.value = data
    } else {
      message.error(msg)
    }
  } catch (error) {
    message.error('网络请求连接失败~')
  }
}
const selectGroup = (selectValue: unknown) => {
  groupId.value = selectValue as string
  sendRobat.value = options.value
    .filter(item => item.groupId == groupId.value)
    .map(element => element.id)
}
const pushRobot = async () => {
  if (sendRobat.value?.length == 0) {
    message.error('请选择要推送的账号！')
    return
  }

  let params = {
    robotIds: sendRobat.value,
    couponConfigRobotDTO: {
      deliveryState: deliveryState.value,
    },
  }

  // 两个都不支持，就是不支持
  // if(){}

  try {
    let { state, message: msg } = await cardSystemApi.PushConfig(params)
    if (state === 200) {
      message.success('推送成功')
    } else {
      message.error(msg)
    }
  } catch (error) {
    message.error('网络请求连接失败~')
  }
}
const filterOption = (input: string, option: any) => {
  return option.label.indexOf(input) >= 0
}
const sendOk = () => pushRobot()
</script>

<template>
  <page-container :title="route.meta.title">
    <a-card>
      <div>
        <div style="margin: 5px 0; text-align: right">
          <span>选择闲鱼账号：</span>
          <a-select
            v-model:value="okRobat"
            @change="selectRobat"
            placeholder="请选择"
            style="width: 150px; text-align: left"
            show-search
            :options="optionList"
            :filter-option="filterOption"
          >
            <a-select-option v-for="(item, index) in optionList" :key="index" :value="item.value">
              {{ item.label }}
            </a-select-option>
          </a-select>
        </div>

        <!-- 备选渠道 - 新 -->

        <!-- 新增 - 是否启用限价 -->
        <div class="rowBox">
          <span class="label-3">发货方式：</span>
          <a-radio-group v-model:value="deliveryState" style="margin-top: 5px">
            <a-radio :value="1">客户端发货</a-radio>
            <a-radio :value="2">API发货</a-radio>
          </a-radio-group>
        </div>

        <!-- 推送 -->
        <div style="margin: 5px 0">
          <span>选择推送闲鱼账号：</span>
          <a-select
            v-model:value="groupId"
            @change="selectGroup"
            placeholder="请选择分组"
            style="width: 6%; text-align: left"
          >
            <a-select-option v-for="(item, index) in groupList" :key="index" :value="item.id">
              {{ item.groupName }}
            </a-select-option>
          </a-select>
          <a-select
            mode="multiple"
            v-model:value="sendRobat"
            @change="selectSendRobat"
            placeholder="请选择"
            allowClear
            style="width: 600px; text-align: left; margin-left: 5px"
            show-search
            :options="optionList"
            :filter-option="filterOption"
          >
            <a-select-option v-for="(item, index) in optionList" :key="index" :value="item.value">
              {{ item.label }}
            </a-select-option>
          </a-select>
          <a-button type="primary" style="margin-left: 10px; border-radius: 6px" @click="sendOk">
            确认推送
          </a-button>
        </div>
      </div>
    </a-card>
  </page-container>
</template>

<style lang="less" scoped>
.hiddenText {
  display: inline-block;
  width: 1000px;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

a:hover {
  color: red;
}

.rowBox {
  display: flex;
  margin-bottom: 15px;
  // background: pink;
}

.label-1 {
  width: 160px;
  text-align: center;
  line-height: 30px;
}

.label-3 {
  width: 160px;
  text-align: center;
  line-height: 30px;
}

.iptWidth {
  width: 500px;
}
</style>
